<div class="bg-light lter b-b wrapper-md">
    <h1 class="m-n font-thin h3"><span class="font-bold" translate="aside.nav.basic.hospitalManage">Hospital</span>
    </h1>

</div>
<div ng-class="isSmart?'':'wrapper-md'" class="remove-wrapper">
    <div class="panel panel-default" ng-controller="HospitalController">
        <div class="wrapper-md">
            <button type="button" class="btn btn-info font-bold" translate="business.patcase.all"
                    ng-click="isFilterOpeCent(false)">
                All
            </button>
            <button type="button" class="btn btn-primary font-bold" translate="business.hosp.OpeCent"
                    ng-click="isFilterOpeCent(true)">
                Operation Center
            </button>
            <button type="button" class="btn btn-success font-bold"
                    ng-click="isFilterOption()" translate="business.navtitle.search_patient">
            </button>
            <!--add hospital-->
            <button type="button" class="btn btn-danger font-bold pull-right" translate="business.navtitle.newhospital"
                    ng-click="newHospital({ templateUrl: 'myModalContent.html' })"
                    ng-if="currentUser.userRights.canManHospital==true">
                <i class="fa fa-plus"></i> Add hospital
            </button>
            <div style="clear: both;"></div>
        </div>
        <div ng-if="isShowFilterOption == true" style="margin-bottom:10px;">
            <div style="margin-bottom: 5px;">
                <label class="col-sm-2 text-center">{{ 'user.country' | translate }}</label>
                <div class="col-sm-4">
                    <select name="mySelect" id="mySelect" class="form-control"
                            ng-change="getProvinces(optionFilter)"
                            ng-model="optionFilter.country_Id"
                            style="width: 100%;">
                        <option ng-repeat="option in ArrCountry" value="option.country_Id">
                            {{ (selectLang == 'English') ? option.country_En_Name : option.country_Cn_Name }}
                        </option>
                    </select>
                </div>

                <label class="col-sm-2 text-center">{{ 'user.province' | translate }}</label>
                <div class="col-sm-4">
                    <select name="mySelect" id="province" class="form-control"
                            ng-change="getCities(optionFilter)"
                            ng-options="option.location_Id as option.loca_Cn_Name for option in ArrProvince"
                            ng-model="optionFilter.province_Id"
                            style="width: 100%;">
                    </select>
                </div>
            </div>
            <div style="margin-bottom: 5px;">
                <label class="col-sm-2 text-center">{{ 'user.city' | translate }}</label>
                <div class="col-sm-4">
                    <select name="mySelect" id="city" class="form-control"
                            ng-change="getCounties(optionFilter)"
                            ng-options="option.location_Id as option.loca_Cn_Name for option in ArrCity"
                            ng-model="optionFilter.city_Id"
                            style="width: 100%;">
                        <option value="0">None</option>
                    </select>
                </div>

                <label class="col-sm-2 text-center">{{ 'user.county' | translate }}</label>
                <div class="col-sm-4" ng-init="getCounties(optionFilter)">
                    <select name="mySelect" id="county" class="form-control"
                            ng-options="option.location_Id as option.loca_Cn_Name for option in ArrCounty"
                            ng-model="optionFilter.county_Id"
                            style="width: 100%;">
                        <option value="0">None</option>
                    </select>
                </div>
            </div>
            <div style="margin-bottom: 5px;">
                <label class="col-sm-2 text-center">{{ 'business.navtitle.hospLevel' | translate }}</label>
                <div class="col-sm-4">
                    <select name="mySelect" id="hospLevel" class="form-control"
                            ng-options="option.hospLevel_Id as option.hospLevel_Cn_Name for option in ArrHospLevel"
                            ng-model="optionFilter.hospLevel_Id"
                            style="width: 100%;">
                        <option value="0">None</option>
                    </select>
                </div>

                <label class="col-sm-2 text-center">{{ 'business.navtitle.hospName' | translate }}</label>
                <div class="col-sm-4">
                    <input type="text" id="hospName" class="form-control"
                           ng-model="optionFilter.hosp_Name"
                           style="width: 100%;"/>
                </div>
            </div>
            <div class="text-center">
                <button type="button" class="m-l-md  btn btn-success font-bold"
                        ng-click="startSearch()" translate="aside.nav.process.search">
                </button>
                <button type="button" class="btn btn-primary font-bold"
                        ng-click="resetFilter()" translate="common.reset">
                </button>
            </div>
        </div>
        <div>
            <div class="table-responsive">
                <table ui-jq="dataTable" style=" width:100%" ui-options="dtOptions"
                       class="table table-striped m-b-none">
                    <thead>
                    <tr>
                        <th style="width:10%"><span class="font-bold" translate="common.number">No</span></th>
                        <th style="width:25%"><span class="font-bold" translate="business.hosp.name">Name</span></th>
                        <th style="width:15%"><span class="font-bold" translate="user.province">Province</span></th>
                        <th style="width:15%"><span class="font-bold" translate="user.city">City</span></th>
                        <th style="width:25%"><span class="font-bold" translate="common.operate"></span></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="hos in ArrHospital">
                        <td>{{ hos.No }}</td>
                        <td>{{ (selectLang == 'English') ? hos.hosp_En_Name : hos.hosp_Cn_Name }} <em
                                ng-show="hos.isOpeCenter==true" class="fa fa-info-circle"></em></td>
                        <td>{{ (selectLang == 'English') ? hos._province.loca_En_Name : hos._province.loca_Cn_Name }}
                        </td>
                        <td>{{ (selectLang == 'English') ? hos._city.loca_En_Name : hos._city.loca_Cn_Name}}</td>
                        <td>
                            <div>
                                <script type="text/ng-template" id="myModalContent.html">
                                    <div ng-include="'views/work/basic_hospital_detail.html?tmp=1'"></div>
                                </script>
                                <button type="button"
                                        ng-click="editHospital({ templateUrl: 'myModalContent.html' }, hos)"
                                        ng-if="currentUser.userRights.canManHospital==true"
                                        class="btn btn-sm btn-warning font-bold"
                                        translate="setting.title">
                                </button>
                                <button type="button" ng-click="openDeleteHospitalPopup(hos)"
                                        ng-if="currentUser.userRights.canManHospital==true"
                                        class="btn btn-sm btn-danger font-bold"
                                        translate="common.delete">
                                </button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script type="text/ng-template" id="deletePopup.html">
    <div class="modal-body">
        <h4>{{'common.deletealert' | translate}}</h4>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" ng-click="cancel()">{{ 'common.cancel' | translate }}</button>
        <button class="btn btn-primary" ng-click="ok()">{{ 'common.ok' | translate }}</button>
    </div>
</script>
